<template>
    <div class="box" ref="boxRef">

    </div>
    <div>{{ p }}</div>
</template>
<script lang='ts' setup>
import { ref, onUpdated } from 'vue'
import usePoint from '@/hooks/usePoint'
const boxRef = ref(null)
const p = usePoint()

onUpdated(() => {
    if (boxRef.value) {
        (boxRef.value as HTMLElement).style.left = p.x -(boxRef.value as HTMLElement).offsetWidth/2+ "px";
        (boxRef.value as HTMLElement).style.top = p.y -(boxRef.value as HTMLElement).offsetHeight/2+ "px";
    }
})
</script>
<style lang='scss' scoped>
.box {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(red, yellow);
}
</style>